<!--
*@Author: QWP
*@Description: 我的考勤图表
*@Date: 2024-07-10 14:30:37
-->
<template>
  <u-card title="我的考勤"
    class="u-my-check-in-card">
    <a-row :gutter="12" align="middle ">
      <a-col :span="6">
        <div ref="chartDom" style="width: 100%; height: 150px"></div>
      </a-col>
      <a-col :span="6">
        <a-space direction="vertical">
          <span class="u-p-title" style="--bc: #1890FF; --bsc: rgba(24,144,255,0.3) ">在岗/值班(天)</span>
          <span class="u-p-value">{{  10 }}</span>
        </a-space>
      </a-col>
      <a-col :span="6">
        <a-space direction="vertical">
          <span class="u-p-title" style="--bc: #FA8C16; --bsc: rgba(250,140,22,0.3) ">备勤(天)</span>
          <span class="u-p-value">{{  12 }}</span>
        </a-space>
      </a-col>
      <a-col :span="6">
        <a-space direction="vertical">
          <span class="u-p-title" style="--bc: #9254DE; --bsc: rgba(146,84,222,0.3) ">请假(天)</span>
          <span class="u-p-value">{{  10 }}</span>
        </a-space>
      </a-col>
    </a-row>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'

onMounted(() => {
  initChart();
})

const chartDom = ref<HTMLElement>();
const initChart = () => {
  var myChart = echarts.init(chartDom.value);
  const option =  {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['60%', '80%'],
        avoidLabelOverlap: false,
        tooltip: {
          trigger: 'none'
        },
        label: {
          show: true,
          formatter: function(data) {
            return [
              '{a|应出勤(天)}',
              '{b|22}',
            ].join('\n')
          },
          position: 'center',
          rich: {
            a: {
              fontFamily:' PingFang SC, PingFang SC',
              fontWeight: 400,
              fontSize: 12,
              lineHeight: 20,
              color: '#666666',
            },
            b: {
              fontFamily: 'PingFang SC, PingFang SC',
              fontWeight: 400,
              fontSize: 20,
              color: '#333333',
            },
          }
        },
        labelLine: {
          show: false
        },
        emphasis: {
          disabled: true
        },
        data: [
          { value: 22, name: 'cq', itemStyle: { color: '#1890FF' } },
          { value: 8, name: 'total', itemStyle: { color: 'rgba(24,144,255,0.2)' }},
        ]
      }
    ]
  };

  option && myChart.setOption(option);
}

</script>

<style lang='scss'>
.u-my-check-in-card {
  .ant-col {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 70%;
      width: 1px;
      height: 70%;
      background-color: #D9D9D9
    }
    &:first-child, &:last-child {
      &::after {
        width: 0;
      }
    }
  }
  .u-p-title {
    position: relative;
    display: inline-block;
    padding-left: 18px;
    font-family: PingFang SC Regular, PingFang SC Regular;
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--bc);
      box-shadow: 0px 4px 3px 0px var(--bsc);
    }
  }
  .u-p-value {
    font-family: D-DIN, D-DIN;
    font-weight: 400;
    font-size: 30px;
    color: #333333;
    line-height: 38px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
</style>